import React from "react";
import {Card, Table, Button, Popconfirm} from "antd";
// import { listApi } from "../../../service/products";
// import ReactJson from 'react-json-view'
// {useEffect, useState}

const data = [
    {
        id: 1,
        name: "白菜",
        day: "2020-05-01",
        price: 5,
    },
    {
        id: 2,
        name: "萝卜",
        day: "2020-05-01",
        price: 3,
    },
    {
        id: 3,
        name: "土豆",
        day: "2020-05-01",
        price: 8,
    },
    {
        id: 4,
        name: "土豆",
        day: "2020-05-01",
        price: 7,
    },
];

function List(props) {
    // const [data, setData] = useState([]);
    // useEffect(() => {
    // listApi().then((res) => {
    //   console.log(res);
    //   console.log(res.data)
    //   setData(res.data.cb.result);
    // });
    // }, []);

    const columns = [
        {
            title: "序号",
            key: "id",
            width: 80,
            align: "center",
            render: (txt, record, index) => index + 1,
        },
        {
            title: "时间",
            dataIndex: "day",
        },
        {
            title: "当前数",
            dataIndex: "name",
        },
        {
            title: "操作",
            render: (txt, record, index) => {
                return (
                    <div>
                        <Popconfirm
                            title="确认修改吗"
                            onCancel={() => console.log("user update")}
                            onConfirm={() => {
                                console.log("user sure update");
                                // 调用api接口去删除
                            }}
                        >
                            <Button size="small" type="primary">
                                修改
                            </Button>
                        </Popconfirm>

                        <Popconfirm
                            title="确认删除吗"
                            onCancel={() => console.log("user delete")}
                            onConfirm={() => {
                                console.log("user sure");
                                // 调用api接口去删除
                            }}
                        >
                            <Button size="small" type="danger">
                                删除
                            </Button>
                        </Popconfirm>
                    </div>
                );
            },
        },
    ];
    return (
        <div>
            <Card
                title="商品列表"
                extra={
                    <Button
                        type="primary"
                        size="small"
                        onClick={() => props.history.push("/admin/products/edit")}
                    >
                        新增
                    </Button>
                }
            >
                <Table columns={columns} bordered dataSource={data}/>
            </Card>
        </div>
    );
}

export default List;
